<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/head :: head"></head>

<body>
<!-- Wrapper -->
<div id="wrapper">
    <div id="sidebar-wrapper" th:replace="fragments/nav :: nav"></div>

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1 th:text="${title}">TITLE</h1>
                    <div th:if="${error != null}" th:text="${error}" class="alert alert-danger" role="alert">Error message</div>
                    <div th:switch="${error != null}">
                        <!--/* Else, show report */-->
                        <div th:case="${false}">
                            <div>
                                <div class="form-group" th:attr="hidden=${instantView != null ? true : false}">
                                    <label class="control-label" for="eventsContainer"><h4>Timeline of Reports:</h4></label>
                                    <div id="eventsContainer">
                                        <div class="container"></div>
                                    </div>
                                </div>
                                <input id="queryId" hidden="true" th:value="${queryId}"/>
                                <div class="form-group" id="tableContainer"></div>
                                <div class="form-group" id="rerunButtonContainer" hidden="true">
                                    <span>Click to Rerun the job: </span>
                                    <span>
                                        <input id="rerun" type="button" class="btn btn-success" value="Rerun" onclick="rerunJob()"/>
                                        <input id="jobId" type="hidden" th:value="${jobId}"/>
                                        <input id="selectedTimestamp" type="hidden"/>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- #Page Content -->
</div>
<!-- #Wrapper -->
<script th:inline="javascript">
/*<![CDATA[*/

    $(document).ready(function() {
        if ([[${instantView != null}]]) {
            getInstantReport();
        }
    });

    function getInstantReport() {
        $.ajax({
                type: 'POST',
                url: '/Flash-Query/AnomalyReport/' + $('#queryId').val(),
                dataType: 'text',
                success: function(html) {
                    $("#tableContainer").html(html);
                    $('#reportTable').DataTable({
                            "pageLength": 100,
                            "order": [[ 3, "desc" ]]
                    });
                }
         });
    }

    function getReport(timestamp, type) {
            $("#rerunButtonContainer").attr("hidden", true);
            $("#tableContainer").html("");
            if (type === "nodata") {
                $("#rerunButtonContainer").attr("hidden", false);
                $("#selectedTimestamp").val(timestamp);
                return;
            }
            var data = {};
            data.selectedDate = timestamp;
            data.frequency = [[${frequency}]];
            $.ajax({
                type: 'POST',
                url: $(location).attr('href'),
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: 'text',
                success: function(html) {
                    $("#tableContainer").html(html);
                    $('#reportTable').DataTable({
                            "pageLength": 100,
                            "order": [[ 3, "desc" ]]
                    });
                }
            });
    }

    var chartData = jQuery.parseJSON([[${timelinePoints}]]);
    if (chartData) {
	    var data = chartData.map(function(datapoint) {
		    return {
			    date : new Date(Number(datapoint.timestamp + "000") * 60), // convert from minutes to millis
			    type : datapoint.type,
                timestamp: datapoint.timestamp
		    }
	    });
	    var heatmap = calendarHeatmap()
		    .data(data)
		    .LAG_IN_HOUR(parseInt([[${hoursOfLag}]]))
		    .selector('.container')
		    .tooltipEnabled(true)
		    .frequency([[${frequency}]])
		    .colorRange(['white', 'red'])
		    .onClick(function (data) {
			    getReport(data.timestamp, data.type);
		    });
	    heatmap();  // render the chart
    }

    function rerunJob() {
        var data = {};
        data.jobId = $("#jobId").val();
        data.timestamp = $("#selectedTimestamp").val();
        $.ajax({
            type: 'POST',
            url: '/Rerun',
            data: JSON.stringify(data),
            contentType: "application/json",
            dataType: 'text',
            success: function(response) {
                if (response === 'success') {
                    showInfoMessage("Job rerun is completed");
                    setTimeout(function() {
                        window.location.href =  $(location).attr('href');
                    }, 200);
                } else {
                    showWarningMessage("Something went wrong in rerunning the job! Try again.");
                }
            },
            error : ajaxMessage
        });
    }

/*]]>*/
</script>

</body>

</html>
